<%@ include file="../include/taglib.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<form id="editForm" class="form-horizontal style-form">
    <input type="hidden" value="${sysRole.id}" name="id"/>
    <input type="hidden" value="${sysRole.roleName}" name="roleName"/>
    <div class="row">
        <div class="col-sm-4">
            <%--<h3>搜索</h3>--%>
            <div class="form-group">
                <label for="input-check-node" class="sr-only">Search Tree:</label>
                <input type="input" class="form-control" id="input-check-node" placeholder="Identify node..."
                       value="">
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-success check-node" id="btn-check-node">选中</button>
                <button type="button" class="btn btn-danger check-node" id="btn-uncheck-node">取消选中</button>
                <button type="button" class="btn btn-primary check-node" id="btn-toggle-checked">反选</button>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-success expand-node" id="btn-expand-node">Expand Node</button>
                <button type="button" class="btn btn-danger expand-node" id="btn-collapse-node">Collapse Node</button>
                <select id="select-expand-node-levels">
                    <option>1</option>
                    <option>2</option>
                </select>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-success" id="btn-expand-all">Expand All</button>
                <button type="button" class="btn btn-danger" id="btn-collapse-all">Collapse All</button>
                <select id="select-expand-all-levels">
                    <option>1</option>
                    <option>2</option>
                </select>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-success" id="btn-check-all">全选</button>
                <button type="button" class="btn btn-danger" id="btn-uncheck-all">取消全选</button>
            </div>
        </div>
        <div class="col-sm-8">
            <%--<h2>Tree</h2>--%>
            <div id="treeview-checkable" class=""></div>
        </div>
    </div>
</form>
<div class="modal-footer">
    <button data-dismiss="modal" class="btn btn-default" type="button" id="cancelBtn">取消</button>
    <button class="btn btn-theme" type="button" id="saveBtn">保存</button>
</div>
<script type="text/javascript">
    $(function () {
        var menuIds = new Set([${sysRole.menuIds}]);

        var defaultData = ${menus_json};

        $("#saveBtn").bind("click", function () {
            var data = $("#editForm").serializeArray();
            var menuIdss = "";
            menuIds.forEach(function (element, index, array) {
                // element: 指向当前元素的值
                // index: 指向当前索引
                // array: 指向Array对象本身
                menuIdss = menuIdss + element + ",";
            });

            if (menuIdss.length > 0) {
                menuIdss = menuIdss.substr(0, menuIdss.length - 1);
            }
            data.push({
                name: "menuIds",
                value: menuIdss
            });
            var package = new AJAXPacket("${ctx}/sysrole/saveMenus");
            package.data.data = data;
            core.ajax.sendPacket(package, function (response) {
                if (response.data.success) {
                    alertMsg.correct("成功！");
                    var keyWord = $("input[name=roleName]").val();
                    jumpMenu('${ctx}/sysrole/page?keyWord=' + keyWord);
                } else {
                    alertMsg.error(response.data.errMsg);
                }
            });
            package = null;
        });

        $("#cancelBtn").bind("click", function () {
            $('#selectable-output').empty();
        });

        var $checkableTree = $('#treeview-checkable').treeview({
            data: defaultData,
            showIcon: false,
            showCheckbox: true,
            showTags: true,
            onNodeChecked: function (event, node) {
                menuIds.add(node.id);
                // var valueIterator = menuIds.values();
                // console.log(valueIterator);
                // $('#checkable-output').prepend('<p>' + node.text + ' was checked</p>');
            },
            onNodeUnchecked: function (event, node) {
                menuIds.delete(node.id);
                // var valueIterator = menuIds.values();
                // console.log(valueIterator);
                // $('#checkable-output').prepend('<p>' + node.text + ' was unchecked</p>');
            }
        });

        var findCheckableNodess = function () {
            return $checkableTree.treeview('search', [$('#input-check-node').val(), {
                ignoreCase: false,
                exactMatch: false
            }]);
        };
        var checkableNodes = findCheckableNodess();

        // Check/uncheck/toggle nodes
        $('#input-check-node').on('keyup', function (e) {
            checkableNodes = findCheckableNodess();
            $('.check-node').prop('disabled', !(checkableNodes.length >= 1));
        });

        $('#btn-check-node.check-node').on('click', function (e) {
            $checkableTree.treeview('checkNode', [checkableNodes, {silent: $('#chk-check-silent').is(':checked')}]);
        });

        $('#btn-uncheck-node.check-node').on('click', function (e) {
            $checkableTree.treeview('uncheckNode', [checkableNodes, {silent: $('#chk-check-silent').is(':checked')}]);
        });

        $('#btn-toggle-checked.check-node').on('click', function (e) {
            $checkableTree.treeview('toggleNodeChecked', [checkableNodes, {silent: $('#chk-check-silent').is(':checked')}]);
        });

        // Check/uncheck all
        $('#btn-check-all').on('click', function (e) {
            $checkableTree.treeview('checkAll', {silent: $('#chk-check-silent').is(':checked')});
        });

        $('#btn-uncheck-all').on('click', function (e) {
            $checkableTree.treeview('uncheckAll', {silent: $('#chk-check-silent').is(':checked')});
        });

        $('#btn-expand-node.expand-node').on('click', function (e) {
            var levels = $('#select-expand-node-levels').val();
            $checkableTree.treeview('expandNode', [checkableNodes, {
                levels: levels,
                silent: $('#chk-expand-silent').is(':checked')
            }]);
        });

        $('#btn-collapse-node.expand-node').on('click', function (e) {
            $checkableTree.treeview('collapseNode', [checkableNodes, {silent: $('#chk-expand-silent').is(':checked')}]);
        });

        // Expand/collapse all
        $('#btn-expand-all').on('click', function (e) {
            var levels = $('#select-expand-all-levels').val();
            $checkableTree.treeview('expandAll', {levels: levels, silent: $('#chk-expand-silent').is(':checked')});
        });

        $('#btn-collapse-all').on('click', function (e) {
            $checkableTree.treeview('collapseAll', {silent: $('#chk-expand-silent').is(':checked')});
        });

    });

</script>